<template>
  <div class="component-root-container">
    <el-header>
      <el-form
        ref="formRule"
        :rules="formRule"
        :model="queryParams"
        label-position="right"
        label-width="130px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单ID:" prop="requestId">
              <el-input
                v-model="queryParams['requestId']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="站址编码:" prop="stationCode">
              <el-input
                v-model="queryParams['stationCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运营商编码:" prop="companyType">
              <el-input
                v-model="queryParams['companyType']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :span="8">
          <el-col :span="8">
            <el-form-item label="电力引入费方式:" prop="powerMode">
              <el-select
                v-model="queryParams['powerMode']"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in options"
                  :key="item.label"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电力引入费:" prop="powerBuildCost">
              <el-input
                maxlength="12"
                v-model="queryParams['powerBuildCost']"
                placeholder="请输入"
                @input="change($event)"
                oninput="value=value.replace(/^[0][0-9]|[^|\-\d.]/g, '').replace(/^(\-)*(\d{1,8})\.(\d\d\d).*$/, '$1$2.$3')"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" class="col_button">
            <div class="button">
              <el-button class="query" @click="buttonClick">
                查询
              </el-button>
              <el-button class="query" @click="reset">
                重置
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <div class="contentInfo" style="margin-bottom:20px;">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景使用情况
          </el-col>
        </el-row>
        <el-row>
          <div class="inline">
            <div>
              <span>调用次数/日：</span><span>{{ query.count }}</span>
            </div>
            <div>
              <span>拦截比率：</span><span>{{ query.rate }}</span>
            </div>
            <div>
              <a
                class="link"
                href="javascript:;"
                @click="$router.push({ name: 'biz-ml' })"
                >详情</a
              >
            </div>
          </div>
        </el-row>
      </div>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景说明
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">
              CRM费用计算环节进行调用，在产品单元数大于等于1且订单的共享方式为共享的条件下，CRM系统订单的电力引入费与该站址下各个共享方产品单元数大于等于1且订单状态在【费用计算完成到已起租状态】的订单的电力引入费的实时校验。
            </div>
          </div>
          <div class="page-tip">
            <div class="params-tip" @click.ctrl.alt="clickExample">
              <span>示例参数</span>：订单编号:1223032312218632，站址编码:130429908000000380，运营商编码:1001，电力引入费方式:包干定价，
电力引入费:0
            </div>
          </div>
        </el-row>
      </div>
    </el-main>

    <el-main>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            校验结果
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">
              <el-row v-for="(item, index) in dialogData" :key="index">
                <el-col> 站址编码: {{ item.stationCode }} </el-col>
                <el-col>
                  校验结果:
                  {{ item.verifyCode == "0" ? "审核未通过" : "审核通过" }}
                </el-col>
                <el-col> 校验说明: {{ item.returnMsg || "无" }} </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script>
import mixin from "./mixins";
export default {
  name: "electricityCostVerify", // 起租前电力引入费一致性校验
  mixins: [mixin],
  data() {
    return {
      query: {
        count: 0,
        rate: "--"
      },
      dialogData: [],
      queryParams: {
        requestId: "", //	订单编号
        stationCode: "", //	站址编码
        companyType: "", //	运营商编码
        powerMode: "", //	电力引入方式
        powerBuildCost: "", //	电力引入费
        // rentMode: "",
        // siteRent: "",
        // isSync: "",
        // coordinationFee: "",
        // landRequisitionFee: ""
      },
      options: [
        {
          value: 0,
          label: "包干定价"
        },
        {
          value: 1,
          label: "逐站点定价"
        }
      ],
      formRule: {
        requestId: [
          { required: true, message: "请输入订单编码", trigger: "blur" }
        ],
        stationCode: [
          { required: true, message: "请输入站址编码", trigger: "blur" }
        ],
        companyType: [
          { required: true, message: "请输入运营商编码", trigger: "blur" }
        ],
        powerMode: [
          { required: true, message: "请选择电力引入方式", trigger: "blur" }
        ],
        powerBuildCost: [
          { required: true, message: "请输入电力引入费", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.queryPageCount("5.6");
  },
  mounted() {},
  methods: {
    async buttonClick() {
      try {
        await this.$refs["formRule"].validate();
        this.dialogData = [];
        var params = {
          requestId: this.queryParams.requestId,
          stationCode: this.queryParams.stationCode,
          companyType: this.queryParams.companyType,
          powerMode: this.queryParams.powerMode,
          powerBuildCost: this.queryParams.powerBuildCost
        };
        //console.log(params)
        const r = await this.$http({
          url: this.$http.adornBizUrl("/electricityIntroduction/check"),
          method: "post",
          data: this.$http.adornData("param=" + JSON.stringify(params), false),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
          }
        });
        // if (r.data.data.length > 0) {
        //   //console.log(r)
        //   this.dialogData = r.data.data;
        // }
        if (Array.isArray(r.data.data)) {
          this.dialogData = r.data.data;
        } else {
          this.dialogData = [r.data.data];
        }
      } catch (e) {
        console.log(e);
      } finally {
      }
    },
    reset() {
      Object.keys(this.queryParams).forEach(item =>
        this.$set(this.queryParams, item, "")
      );
      this.dialogData = [];
      this.$refs["formRule"].clearValidate();
    },
    change(e) {
      this.$forceUpdate();
    },
    async queryPageCount(scene) {
      try {
        const r = await this.$http({
          url: this.$http.adornBizUrl("/log/queryStatistics"),
          method: "post",
          data: this.$http.adornData(
            "param=" + JSON.stringify({ scene: scene }),
            false
          ),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
          }
        });
        if (r.data.data && r.data.data.length > 0) {
          var result = r.data.data[0];
          this.query.count = result.cnt || "0";
          this.query.rate =
            result.per == null ? "--" : (result.per * 100).toFixed(1) + "%";
        }
      } catch (e) {
        console.log(e);
      } finally {
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../../assets/scss/_formatQueryPage";
@include formatQueryPage(130px, 60%, right);
.el-input {
  width: 60%;
}

.el-select {
  width: 60%;
}

.query {
  color: rgba(255, 255, 255, 1);
  background: rgba(235, 75, 75, 1);
  border-radius: 6px;
  border-color: rgba(235, 75, 75, 1);
}
</style>
